<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品录入表单</title>
    <link rel="stylesheet" href="storage.css">
</head>
<body>
<form id="productForm">
    <label for="supplier">供应商:</label>
    <input type="text" id="supplier" name="supplier" required>

    <label for="link">链接:</label>
    <input type="text" id="link" name="link" required>

    <label for="productName">商品名称:</label>
    <input type="text" id="productName" name="productName" required>

    <label for="productImage">商品图片:</label>
    <input type="file" id="productImage" name="productImage" accept="image/*" multiple required>
    <!-- 图片预览区域 -->
    <div id="imagePreviewContainer"></div>

    <label for="color">颜色:</label>
    <input type="text" id="color" name="color">

    <label for="size">尺码:</label>
    <input type="text" id="size" name="size">

    <div class="price-section">
        <label>代发价格:</label>
        <div class="price-grid">
            <label><input type="number" name="price1" step="0.01" value="0" required></label>
            <label><input type="number" name="price2" step="0.01" value="0" required></label>
            <label><input type="number" name="price3" step="0.01" value="0" required></label>
            <label><input type="number" name="price4" step="0.01" value="0" required></label>
            <label><input type="number" name="price5" step="0.01" value="0" required></label>
        </div>
    </div>

    <div class="shipping-section">
        <label>邮费:</label>
        <div class="shipping-grid">
            <label><input type="number" name="shipping1" step="0.01" value="0" required></label>
            <label><input type="number" name="shipping2" step="0.01" value="0" required></label>
            <label><input type="number" name="shipping3" step="0.01" value="0" required></label>
            <label><input type="number" name="shipping4" step="0.01" value="0" required></label>
            <label><input type="number" name="shipping5" step="0.01" value="0" required></label>
        </div>
    </div>

    <button type="submit">提交</button>
</form>

<script>
    // 图片预览功能
    document.getElementById('productImage').addEventListener('change', function (event) {
        const files = event.target.files; // 获取所有选择的文件
        const previewContainer = document.getElementById('imagePreviewContainer');
        previewContainer.innerHTML = ''; // 清空之前的预览

        if (files) {
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader(); // 创建 FileReader 对象

                reader.onload = function (e) {
                    const img = document.createElement('img'); // 创建 img 元素
                    img.src = e.target.result; // 设置图片的 src
                    previewContainer.appendChild(img); // 将图片添加到预览容器
                };

                reader.readAsDataURL(file); // 读取文件内容
            }
        }
    });

    // 表单提交功能
    document.getElementById('productForm').addEventListener('submit', async function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        try {
            // 收集表单数据
            const formData = {
                supplier: document.getElementById('supplier').value,
                link: document.getElementById('link').value,
                productName: document.getElementById('productName').value,
                productImage: [], // 用于存储图片的 Base64 编码
                color: document.getElementById('color').value,
                size: document.getElementById('size').value,
                price1: document.querySelector('input[name="price1"]').value,
                price2: document.querySelector('input[name="price2"]').value,
                price3: document.querySelector('input[name="price3"]').value,
                price4: document.querySelector('input[name="price4"]').value,
                price5: document.querySelector('input[name="price5"]').value,
                shipping1: document.querySelector('input[name="shipping1"]').value,
                shipping2: document.querySelector('input[name="shipping2"]').value,
                shipping3: document.querySelector('input[name="shipping3"]').value,
                shipping4: document.querySelector('input[name="shipping4"]').value,
                shipping5: document.querySelector('input[name="shipping5"]').value
            };

            // 处理图片转 Base64
            const files = document.getElementById('productImage').files;
            if (files.length > 0) {
                for (const file of files) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        formData.productImage.push(e.target.result); // 添加 Base64 数据
                    };
                    reader.readAsDataURL(file); // 读取文件为 Base64
                }

                // 等待所有图片加载完成
                await new Promise((resolve) => {
                    const check = setInterval(() => {
                        if (formData.productImage.length === files.length) {
                            clearInterval(check);
                            resolve();
                        }
                    }, 100);
                });
            }

            // 提交 JSON 数据到后端接口
            let timestamp = Date.now()
            let url = `http://localhost:9200/swin_storage/_doc/${timestamp}?pretty`
            const response = await fetch(url, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            });

            const data = await response.json();
            if (data.success) {
                alert('商品保存成功！');
                // 可选：清空表单
                document.getElementById('productForm').reset();
                document.getElementById('imagePreviewContainer').innerHTML = '';
            } else {
                alert('商品保存失败：' + data.message);
            }
        } catch (error) {
            console.error('提交失败：', error);
            alert('提交失败，请检查网络或后端服务。');
        }
    });
</script>
</body>
</html>